<template>
  <mescroll-uni
    ref="mescrollRef"
    @init="mescrollInit"
    height="100%"
    :down="downOption"
    @down="downCallback"
    :up="upOption"
    @up="upCallback"
  >
    <view
      class="list"
      v-for="item in listData"
      :key="item.id"
    >
      <list-item :listData="item"></list-item>
    </view>
  </mescroll-uni>
</template>

<script>
import listItem from "../list-item";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  components: { listItem },
  mixins: [MescrollMixin],
  props: {
    i: {
      type: Number,
      default: 0,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      downOption: {
        auto: false, // 不自动加载
      },
      upOption: {
        auto: false, // 不自动加载
      },
      isInit: false, // 当前tab是否已初始化
      curPageLen: 0,
      totalSize: 0,
      listData: [],
    };
  },
  watch: {
    // 监听下标的变化
    index(val) {
      if (this.i === val && !this.isInit) {
        this.isInit = true; // 标记为true
        this.mescroll && this.mescroll.triggerDownScroll();
      }
    },
    listData: {
      handler(val) {
        console.log(val.length);
        this.$emit("update:listHeight", val.length * 200);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async getListRect() {
      let res = await this.$u.getRect(".list");
      console.log(res);
    },
    // mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
      this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序
      // 自动加载当前tab的数据
      if (this.i === this.index) {
        this.isInit = true; // 标记为true
        this.mescroll.triggerDownScroll();
      }
    },
    async getListData(page) {
      let res = await uni.request({
        url: "https://api.t.rushimei.cn/app/getProjectList",
        method: "POST",
        data: { page },
      });
      console.log(res[1]);
      this.curPageLen = res[1].data.data.data.length;
      this.totalSize = res[1].data.data.total;
      this.getListRect();
      if (page == 1) this.listData = [];
      this.listData = [...this.listData, ...res[1].data.data.data];
      this.mescroll.endBySize(this.curPageLen, this.totalSize);
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.getListData(page.num);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>